<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评论页</title>
		<style>
			/* 上半部分 */
			#comment{
				width: 900px;
				height: 100px;
				border: 1px solid #ffffff;
				padding: 15px;
			
			}
	/*抓到精灵图：3星----->推荐：显示元素     建议：背景图放大，微调*/
			i{
			    display: block;
				/* border: 1px solid red; */
				width: 72px;
				height: 16px;
			  /*  padding: 0px 35.6px; */
				background-image: url(img/小心心.jpg);
				/* margin-left: 10px; */
				/* background-position: -146.8px 2325px; */
				background-position: -132.7px -253px;
			   /* border-top: 2px solid #fff;
				 */
				
			
			}
			
			#line{
				width: 880px;
				border: 1px solid #f0f0f0;
				margin-top: 20px;
				/*盒子自适应居中*/
				margin: 0 auto;
				margin-top: 20px;
			}
			/*下半部分*/	
			   #pages{
				   width: 900px;
				   margin-top: 10px;
			   }
			   #pages a{/*加外边框 内边距*/
				  border: 1px solid #ddd; 
				  padding: 4px 10px;
				  border-radius: 5px;
			   }
			   #pages a.current{
				   border: 0;
				   text-decoration: none;
				   color:#000;
			   }
			 
		</style>
	</head>
	<body>
		<!-- 思路  html 结构 -->
			<div id="comment">
				<!-- 精灵图：将小图标导出1张矢量图[png] 
				 好处：图片名称不用起，服务器压力小
				 -->
				<i></i>
				
				<div id="line"></div>
			</div>
			<div id="pages">
				<a href="#"class="current">1</a>
				<a href="#">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<a href="#">6</a>
			</div>
	</body>
</html>